<template>
	<view>
		<u-popup v-model="showPop" border-radius="14" mode="bottom" z-index="11">
			<scroll-view style="height: 750rpx;" class="item" scroll-y="true">
				<view class="searchBox px-3 ">
					<u-form :model="formData" ref="uForm">
						<view class="d-flex  pt-5 form mb-3">
							<!-- <view>
												<hpy-form-select
													:dataList="industrialMarkList"
													text="name"
													name="dictId"
													v-model="formData.companyServiceTypeId"
													title="全部产业"
													@change="getcompanyServiceTypeName"
													hideBorder
												/>
													
												</u-form-item>
											</view> -->
							<view class="u-m-l-10 flex-1">
								<u-search
									placeholder="搜索"
									bg-color="#f2f3f5"
									placeholder-color="#fff"
									v-model="filterText"
									:show-action="false"
								></u-search>
							</view>
						</view>
					</u-form>

					<view>
						<ly-tree
							ref="tree"
							check-on-click-node
							:filter-node-method="filterNode"
							child-visible-for-filter-node
							:props="props"
							:tree-data="companyList"
							node-key="companyId"
							:children="'childNode'"
							:showRadio="showRadio"
							:checkOnlyLeaf="checkOnlyLeaf"
						></ly-tree>
					</view>
				</view>
			</scroll-view>
			<view class="d-flex py-2 j-sa">
				<button class="warningBnt btn-cancel" @click="hanglgCancelFn">取 消</button>
				<button class="primaryBnt btn-cancel" @click="hanglgConfirmFn">确 定</button>
			</view>
		</u-popup>
	</view>
</template>

<script>
import { getDictByParentId, getCompanySelectByCompanyServiceTypeId } from '@/api/apis.js';
export default {
	data() {
		return {
			showPop: false,
			industrialMarkList: [],
			props: {
				label: 'companyName',
				children: 'childNode'
			},
			showRadio: true,
			checkOnlyLeaf: true,
			filterText: '',
			parentCompany: [],
			formData: {
				companyServiceTypeId: ''
			},
			companyList: []
		};
	},
	watch: {
		filterText(val) {
			this.$refs.tree.filter(val, this.filterNodeData);
		}
	},
	methods: {
		show() {
			this.showPop = true;
			this.industrialMarkFn();
			this.getCompanySelectByCompanyServiceTypeFn();
		},
		// getcompanyServiceTypeName(e) {
		// 	this.getCompanySelectByCompanyServiceTypeFn(e);
		// },
		//获取产业标记
		industrialMarkFn() {
			getDictByParentId({
				parentId: 'COMPANY_SERVICE'
			}).then(res => {
				if (res.code == 10000) {
					this.industrialMarkList = res.data.map(obj => ({
						...obj,
						['checked']: false,
						['disabled']: false,
						['text']: obj.name,
						['value']: obj.dictId
					}));
				} else {
					this.$u.toast(res.msg);
				}
			});
		},
		getCompanySelectByCompanyServiceTypeFn(e) {
			getCompanySelectByCompanyServiceTypeId({
				companyServiceTypeId: e ? e.value : ''
			}).then(res => {
				if (res.code == 10000) {
					this.companyList = res.data.map(obj => ({ ...obj, ['childNode']: [] }));
				} else {
					this.$u.toast(res.msg);
				}
			});
		},
		hanglgCancelFn() {
			this.showPop = false;
		},
		hanglgConfirmFn() {
			let array = this.$refs.tree.getCheckedNodes();
			this.$emit('confirom', array[0]);
			this.hanglgCancelFn();
		},
		//过滤
		filterNode(value, data) {
			if (data.userVos) {
				data.userVos.forEach(a => {
					this.$set(a, 'companyName', a.realName);
					data.childNode.push(a);
				});
			}
			if (!value) return true;
			return data.companyName.indexOf(value) !== -1;
		}
	}
};
</script>

<style lang="scss" scoped>
.searchBox {
	::v-deep .select-picker {
		width: 120px !important;
		background-color: #f2f3f5 !important;
	}
	::v-deep .u-content {
		border-radius: 8px !important;
		height: 40px !important;
		background-color: #f2f3f5 !important;
		flex: 1;
	}
}

.btn-cancel {
	width: 40%;
}
::v-deep .ly-tree {
	padding: 0 !important;
}
::v-deep .ly-tree-node {
	height: 100rpx;
	align-items: center;
	background-color: #f2f3f5;
	margin-bottom: 40rpx;
	border-radius: 8px;
	padding-left: 20rpx;
}

::v-deep .ly-radio__inner {
	width: 18px !important;
	height: 18px !important;
	border: 1px solid #dcdfe6 !important;
	background-color: #f2f3f5 !important;
}

::v-deep .is-checked {
	.ly-radio__inner {
		background-color: #0052d9 !important;
	}
}

::v-deep .uicon-search {
	color: #0052d9 !important;
}
</style>
